<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2020/6/4
  Time: 16:53
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>登陆页面</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- favicon
		============================================ -->
    <link rel="shortcut icon" type="image/x-icon" href="img/favicon.ico">
    <!-- Google Fonts
		============================================ -->
    <link href="https://fonts.googleapis.com/css?family=Play:400,700" rel="stylesheet">
    <!-- Bootstrap CSS
		============================================ -->
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <!-- Bootstrap CSS
		============================================ -->
    <link rel="stylesheet" href="css/font-awesome.min.css">
    <!-- owl.carousel CSS
		============================================ -->
    <link rel="stylesheet" href="css/owl.carousel.css">
    <link rel="stylesheet" href="css/owl.theme.css">
    <link rel="stylesheet" href="css/owl.transitions.css">
    <!-- animate CSS
		============================================ -->
    <link rel="stylesheet" href="css/animate.css">
    <!-- normalize CSS
		============================================ -->
    <link rel="stylesheet" href="css/normalize.css">
    <!-- main CSS
		============================================ -->
    <link rel="stylesheet" href="css/main.css">
    <!-- morrisjs CSS
		============================================ -->
    <link rel="stylesheet" href="css/morrisjs/morris.css">
    <!-- mCustomScrollbar CSS
		============================================ -->
    <link rel="stylesheet" href="css/scrollbar/jquery.mCustomScrollbar.min.css">
    <!-- metisMenu CSS
		============================================ -->
    <link rel="stylesheet" href="css/metisMenu/metisMenu.min.css">
    <link rel="stylesheet" href="css/metisMenu/metisMenu-vertical.css">
    <!-- calendar CSS
		============================================ -->
    <link rel="stylesheet" href="css/calendar/fullcalendar.min.css">
    <link rel="stylesheet" href="css/calendar/fullcalendar.print.min.css">
    <!-- forms CSS
		============================================ -->
    <link rel="stylesheet" href="css/form/all-type-forms.css">
    <!-- style CSS
		============================================ -->
    <link rel="stylesheet" href="css/style.css">
    <!-- responsive CSS
		============================================ -->
    <link rel="stylesheet" href="css/responsive.css">
    <link rel="stylesheet" href="css/Lobibox.min.css">
    <style>
        .navbar-default .navbar-link {
            color: white;
            text-decoration: none;
            margin-right: 20px;
        }
        .navbar-default {
            margin-bottom: 50px;
        }
        .navbar-header .navbar-brand {
            color: white;
        }
        input[type=checkbox], input[type=radio] {
            margin: 0px 0 0;
            margin-top: 1px\9;
            line-height: normal;
        }
        .imgCode{
            position: absolute;
            top: 25px;
            right: 3px;
            width:110px;
            height: 40px;
        }
    </style>
    <!-- modernizr JS
		============================================ -->
    <script src="js/vendor/modernizr-2.8.3.min.js"></script>

    <!-- jquery
    ============================================ -->
    <script src="js/vendor/jquery-1.12.4.min.js"></script>
    <!-- bootstrap JS
        ============================================ -->
    <script src="js/bootstrap.min.js"></script>
    <!-- wow JS
        ============================================ -->
    <script src="js/wow.min.js"></script>
    <!-- price-slider JS
        ============================================ -->
    <script src="js/jquery-price-slider.js"></script>
    <!-- meanmenu JS
        ============================================ -->
    <script src="js/jquery.meanmenu.js"></script>
    <!-- owl.carousel JS
        ============================================ -->
    <script src="js/owl.carousel.min.js"></script>
    <!-- sticky JS
        ============================================ -->
    <script src="js/jquery.sticky.js"></script>
    <!-- scrollUp JS
        ============================================ -->
    <script src="js/jquery.scrollUp.min.js"></script>
    <!-- mCustomScrollbar JS
        ============================================ -->
    <script src="js/scrollbar/jquery.mCustomScrollbar.concat.min.js"></script>
    <script src="js/scrollbar/mCustomScrollbar-active.js"></script>
    <!-- metisMenu JS
        ============================================ -->
    <script src="js/metisMenu/metisMenu.min.js"></script>
    <script src="js/metisMenu/metisMenu-active.js"></script>
    <!-- tab JS
        ============================================ -->
    <script src="js/tab.js"></script>
    <!-- icheck JS
        ============================================ -->
    <script src="js/icheck/icheck.min.js"></script>
    <script src="js/icheck/icheck-active.js"></script>
    <!-- plugins JS
        ============================================ -->
    <script src="js/plugins.js"></script>
    <!-- main JS
        ============================================ -->
    <script src="js/main.js"></script>
    <script src="js/jquery.cookie.js"></script>
    <script src="js/Lobibox.js"></script>
    <!-- tawk chat JS
        ============================================ -->
    <!--<script src="js/tawk-chat.js"></script>-->
</head>

<body>
<nav class="navbar-default navbar-inverse navbar-static-top">
    <div class="container-fluid">
        <div class="navbar-header">
            <!--返回主首页连的接-->
            <a class="navbar-brand" href="shop_show.html">
                <i class="fa fa-space-shuttle" aria-hidden="true"></i>
                火箭速购
            </a>
        </div>
        <!--登陆和注册的连接-->
        <p class="navbar-text navbar-right"><a href="register.html" class="navbar-link" >注册</a></p>
    </div>
</nav>
<!--[if lt IE 8]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<div class="error-pagewrap">
    <div class="error-page-int">
        <div class="text-center m-b-md custom-login">
            <h3>请您先登陆</h3>
            <p>这是最好的商城</p>
        </div>
        <div class="content-error">
            <div class="hpanel">
                <div class="panel-body">
                    <form onsubmit="return false;" id="loginForm">
                        <div class="form-group">
                            <label class="control-label" for="username">用户名</label>
                            <input type="text" placeholder="请输入用户名" title="请输入用户名" required="" value="" name="username" id="username" class="form-control" autocomplete="off">
                        </div>
                        <div class="form-group">
                            <label class="control-label" for="password">密码</label>
                            <input type="password" title="请输入密码" placeholder="请输入密码" required="" value="" name="password" id="password" class="form-control" autocomplete="off">
                        </div>
                        <div class="form-group" style="position: relative">
                            <label class="control-label" for="imgCode" >验证码</label>
                            <input type="text" title="请输入验证码" placeholder="请输入验证码" required="" value="" name="imgCode" id="imgCode" class="form-control" style="width: 70%" autocomplete="off">
                            <img src="${pageContext.request.contextPath}/getImgCode" class="imgCode" id="codeImg">
                        </div>
                        <button class="btn btn-success btn-block loginbtn" onclick="login()">登陆</button>
                        <a class="btn btn-default btn-block" href="register.html">注册</a>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<script>

    //验证输入
    function validata(username,password,imgCode) {
        var result = 0;
        if (!username) {
            result=1;
        }
        if (!password) {
            result=1;
        }
        if (!imgCode) {
            result=1;
        }
        return result;
    }

    /*var localcart = {1001:1,1002:3,1003:4};
    localcart = JSON.stringify(localcart)
    localStorage.setItem("local_shopping_cart",localcart)*/

    //登陆
    function login() {
        var username = $('#username').val();
        var password = $('#password').val();
        var imgCode = $('#imgCode').val();
        //验证输入是否合法
        if (validata(username,password,imgCode)==1){
            return;
        }
        $.ajax({
            url:'${pageContext.request.contextPath}/login',
            data:{username:username,password:password,imgCode:imgCode},
            type:'post',
            dataType:'json',
            success:function (_data) {
                //{"msg":"登陆成功","userInfo":{"balance":23445656.00,"email":"223@qq.com","id":1,"phone":"13000000000","registerDate":"2020-05-13 14:58:15","sex":"F","status":1,"username":"张三"},
                // "code":"2"}
                //1.把用户名保存到cookies  2.把用户的购物车数据同步到本地（三种情况） 3.如果有跳转前的页面，跳转到登陆前的页面
                //展示错误信息
                if (showWarning(_data) == 1) {
                    changeImg();
                    return;
                }
                //登陆成功运行下面代码
                var username = _data.userInfo.username;
                var userId = _data.userInfo.id;
                $.cookie('username', username, {expires: 7, path: '/'});
                //同步购物车
                //获取本地购物车数据
                var localCartData = localStorage.getItem('local_shopping_cart');
                //同步购物车数据
                syncCartData(localCartData)
                var prevurl=document.referrer; // 获取上一个页面的url地址
                //搜索字符串里有没有"login.jsp"相关字符,如果没有就跳转到上次访问页面
                if(prevurl.search('login.jsp') == -1){
                    Lobibox.notify('success', { width:$(window).width()/5,
                        delay: 2000,
                        size: 'mini',
                        title: '成功',
                        position: 'bottom right',
                        showClass: 'fadeInDown',
                        hideClass: 'fadeUpDown',
                        msg: '登陆成功，3秒后跳转到商城首页'
                    });
                    setTimeout(function () {
                        window.location.href="shop_show.html";
                    },3000)

                }else {
                    //如果直接访问登陆页面，成功后返回主页面
                    Lobibox.notify('success', { width:$(window).width()/5,
                        delay: 2000,
                        size: 'mini',
                        title: '成功',
                        position: 'bottom right',
                        showClass: 'fadeInDown',
                        hideClass: 'fadeUpDown',
                        msg: '登陆成功，3秒后返回主页面'
                    });
                    setTimeout(function () {
                        window.location.href='shop_show.html';
                    },3000)
                }
            }

        })

    }
    //改变验证码
    $('#codeImg').bind('click',changeImg)
    function changeImg() {
        $('#codeImg').prop("src", "${pageContext.request.contextPath}/getImgCode?a=" + Math.random())
        $('#codeImg').unbind('click')
        setTimeout(function () {
            $('#codeImg').bind('click',changeImg)
        }, 2000);
    }
    //展示错误信息提示框
    function showWarning(_data) {
        if (_data.code==1){
            //登陆失败提示框
            Lobibox.notify('error', { width:$(window).width()/5,
                delay: 2000,
                size: 'mini',
                title: '失败',
                position: 'bottom right',
                showClass: 'fadeInDown',
                hideClass: 'fadeUpDown',
                msg: '验证码错误，请重试'
            });
            return 1
        }else if (_data.code==3){
            //登陆失败提示框
            Lobibox.notify('error', { width:$(window).width()/5,
                delay: 2000,
                size: 'mini',
                title: '失败',
                position: 'bottom right',
                showClass: 'fadeInDown',
                hideClass: 'fadeUpDown',
                msg: '密码或用户名错误，请重试'
            });
            return 1
        }
    }
    //同步购物车数据方法
    function syncCartData(localCartData) {
        if(localCartData==null){
            localCartData = JSON.stringify({})
        }
        //参数为本地购物车书json字符串
        //"{"1001":1,"1002":3}"
        $.ajax({
            url:'cart/syncCartData',
            type:'post',
            datatype:'json',
            data:{localCartData:localCartData},
            success:function (_data) {
                //_data数据为：{1001: 1, 1002: 3, 1003: 1, 1004: 6}
                //覆盖本地购物车数据
                var syncCart = JSON.stringify(_data)
                console.log(syncCart)
                localStorage.setItem("local_shopping_cart",syncCart);
            }
        })

    }


</script>

</body>
</html>
